

<template>
  <!-- Teleport可以把包裹内容渲染到含有sdy-header标签里面 -->
  <Teleport to=".sdy-header">
    <van-nav-bar :title="title"  :left-arrow="back">
    <!-- 整个组件为 sdy-header 只要其他地方引入并在具名标签添加内容
    就会渲染到相应部分 因为是具名插槽所以要添加 template -->
    <!-- 这里的#确定位置？ -->
    <template #left>
      <slot name="left"></slot>
    </template>

    <template #title>
      <slot name="title">{{title}}</slot>
    </template>
  
    <template #right>
      <slot name="right"></slot>
    </template>
    </van-nav-bar>
  </Teleport>
</template>

<script setup lang="ts">
import { defineProps, Teleport } from 'vue';
interface MyTopBar{
    title:string,
    back?:boolean
}
// import type {MyTopBar} from '@/config/inter'
defineProps<MyTopBar>()
</script>

<style scoped lang="scss">

</style>